<template>
  <div>

	<myheader></myheader>
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名：<input type="text" v-model="username">
			</div>

			<br>

			<div>
				密码：<input type="password" v-model="password">
			</div>

			<br>

			<center>
			<div>
				<drag-verify
					:width='width'
					:height='height'
					:text='text'
					ref='Verify'
				>
				</drag-verify>
			</div>
			</center>

			<br>

			<Button @click="submit">登录</Button>
			&nbsp;&nbsp;
			<img @click="sina" src="http://127.0.0.1:8000/static/sina.png" >
			&nbsp;&nbsp;
			<img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png" >	


		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
// 组件包含
import myheader from './myheader'
import myfooter from './myfooter'

// 导入滑块验证码
import dragVerify from 'vue-drag-verify'

export default {
  data () {
    return {
		// 面包屑导航
		datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
		msg: "这是一个变量",
		username: '',
		password: '',
		code: '',
		width: 300,
		height: 42,
		text: '请将滑块拖动到右侧'


    }
  },
  // 定义组件
  components:{
	  'myheader': myheader,
	  'myfooter': myfooter,
	  'dragVerify': dragVerify,
  },
  	mounted:function(){

   
  
	},

  	methods:{
		// 钉钉登录
		dingding(){
			var appid = 'dingoahmelrgy51wltnjzs';
			var redirect_uri = 'http://localhost:8000/dingding_back/';

			var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
			
			window.location.href = url;
		},

		// 新浪微博登录
		sina(){
		// client_id 应用id
		// redirect_uri 回调网址

		let url = "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

		//跳转
		window.location.href = url;

		},
		
		
		// 提交事件
		submit: function(){
			//判断是否拖动滑块
			console.log(this.$refs.Verify.isPassing);
			
			// 判断
			if(this.username == ''){
				this.$Message('用户名不能为空')
				return false;
			}
			if(this.password == ''){
				this.$Message('密码不能为空')
				return false;
			}
			if(this.$refs.Verify.isPassing == false){
				this.$Message('请先拖动滑块')
				return false;
			}
			// 请求后台接口
			this.axios.get('http://localhost:8000/login/', {
				params: {
					username: this.username,
					password: this.password,
					}
					}).then((result) =>{
				console.log(result);
				this.$Message(result.data.message);

			// 判断结果
			if (result.data.code == 200) {
				// 存储用户信息
				localStorage.setItem('username', result.data.username)
				localStorage.setItem('uid', result.data.uid)

				// 跳转页面
				this.$router.push('/')
			} else {
				this.$Message(result.data.message)
			}
			})
	  }
     
  }
}


</script>
 
<style>



</style>